var classes = {
	imgContainer : 'image-holder'
};

var sortedImages = [];

var battleImages = [];

var moveBefore = function(array, elemA, elemB) {
	for (var i=0; i < array.length; i++) {
		var current = array[i];
		if (current === elemA) {
			array.splice(i--, 1);
		}
		else if (current === elemB) {
			array.splice(i++, 0, elemA);
		}
	}
}

function updateBattleImages() {
	for (var i = 0; i < sortedImages.length; i++) {
		battleImages[i].setAttribute('src', sortedImages[i]);
		battleImages[i].className = 'thumb';
	}
	
	for (var i = sortedImages.length; i < battleImages.length; i++) {
		battleImages[i].className = 'empty';
	}
}

var clickHandler = function(event) {
	var a = document.getElementById('a').children[0];
	var b = document.getElementById('b').children[0];
	
	var winner = event.target;
	var loser = winner === a ? b : a;
	
	var winnerIndex = sortedImages.indexOf(winner.getAttribute('src'));
	if (winnerIndex >= 0) {
		moveBefore(sortedImages, 
				   winner.getAttribute('src'), 
				   loser.getAttribute('src'));
				   
	    if (winnerIndex > 1) {
			a.setAttribute('src', sortedImages[0]);
			b.setAttribute('src', sortedImages[1]);
		}
	    else {
			//TODO images now have partial order, issue talkback
			console.log('Sorted! ', sortedImages);
			window.location = 'battle.jsp?img1=' + sortedImages[0]
							  + '&img2=' + sortedImages[1]
							  + '&img3=' + sortedImages[2]
							  + '&img4=' + sortedImages[3];
			
			// Next Round
			imgList = sortedImages;
			sortedImages = [];
			a.setAttribute('src', imgList.pop());
			b.setAttribute('src', imgList.pop());
		}
	}
	else {
		sortedImages.unshift(winner.getAttribute('src'));
		sortedImages.push(loser.getAttribute('src'));
		
		if (imgList.length > 0) {
			a.setAttribute('src', imgList.pop());
			b.setAttribute('src', imgList.pop());
		}
		else {
			a.setAttribute('src', sortedImages[2]);
			b.setAttribute('src', sortedImages[3]);
		}
	}
	
	updateBattleImages();
};

function viewImageOnClick(event) {
	if (event.target.className !== 'thumb') {
		return;
	}
	
	var url = event.target.getAttribute('src');
	if (url !== "") {
		window.location = 'browser.jsp?url=' + url;
	}
}

function changeLadder(event) {
	var table = document.getElementById('top-table');
	var newHTML = '			\
		<tr>				\
			<th>Img</th>	\
			<th>Rating</th>	\
			<th>Title</th>	\
		</tr>				\
	';
		
	var list;
	switch (this.value) {
	case 'cat':
		list = catList;
		break;
	case 'dog':
		list = dogList;
		break;
	case 'bird':
		list = birdList;
		break;
	case 'human':
		list = humanList;
		break;
	case 'pets':
		list = petsList;
		break;
	case 'wildlife':
		list = wildlifeList;
		break;
	default:
		list = allList;
		break;
	}
	
	for (var i=0; i < list.length; i++) {
		var item = list[i];
		newHTML += '												\
			<tr>													\
				<td>												\
					<div class="image-holder">						\
						<img class="thumb" src="' + item.url + '">	\
					</div>											\
				</td>												\
				<td><div>' + item.rating + '</div></td>				\
				<td><div>' + item.title  + '</div></td>				\
			</tr>													\
		';
	}
	table.innerHTML = newHTML;
}

window.onload = function(event) {
	var a = document.getElementById('a').children[0];
	a.setAttribute('src', imgList.pop());
	a.addEventListener('click', clickHandler);
	
	var b = document.getElementById('b').children[0];
	b.setAttribute('src', imgList.pop());
	b.addEventListener('click', clickHandler);
	
	battleImages = [
        document.getElementById('first'),
        document.getElementById('second'),
        document.getElementById('third'),
        document.getElementById('fourth')
    ];
	
	document.addEventListener('click', viewImageOnClick);
	
	var selecter = document.getElementById('category-select');
	selecter.onchange = changeLadder;
}